<template>
	<up-popup :show="showPopup" mode="center" :round="12" @close="closePopup" bgColor="transparent">
		<view class="popup-content">
			<image class="popup-image" :src="popupInfo.image_url" mode="aspectFill" @click="clickPopup" />
			<image :src="imgBaseUrl + 'close-popup.png'" class="icon-60 mt-32" @click="closePopup" />
		</view>
	</up-popup>
</template>
<script setup lang="ts">
import { $getHomePopup } from "@/api/home"
import { jumpLinkTo } from "@/utils/page-redirect"
import { today } from "@/utils/tools"

const imgBaseUrl = inject("imgBaseUrl")
const showPopup = ref(false)
const popupInfo = ref<any>({})
const getHomePopup = () => {
	$getHomePopup().then((res: any) => {
		popupInfo.value = res
		let { id, type, click_no_popup_switch } = res
		let showDate = uni.getStorageSync(id.toString()) || ""
		/**
		 * type 10-每日首次弹出 20-仅一次
		 * click_no_popup_switch 点击后不再弹出
		 */
		if (!showDate || (type == 10 && showDate != today())) {
			showPopup.value = true
			if (!click_no_popup_switch) {
				uni.setStorageSync(id.toString(), today())
			}
		}
	})
}
const clickPopup = () => {
	jumpLinkTo(popupInfo.value.link)
	if (popupInfo.value.click_no_popup_switch) {
		uni.setStorageSync(popupInfo.value.id.toString(), today())
	}
}
const closePopup = () => {
	showPopup.value = false
}
onMounted(() => {
	getHomePopup()
})
</script>
<style lang="scss" scoped>
.popup-content {
	width: 600rpx;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.popup-image {
		width: 600rpx;
		height: 800rpx;
		border-radius: 24rpx;
	}
}
</style>
